<template>
  <div class="form-detail" :class="{'form-detail-border': border}">
    <el-form size="mini" :inline="inline" v-if="data" :label-width="labelWidth">
      <el-row class="row-flex" type="flex" v-bind="rowProps">
        <template v-for="(item, index) in columns">
          <slot :name="item.prop" :data="currData">
            <el-col :key="index"
                    :span="item.span || span || colSpan"
                    v-if="!item.disabled">
              <el-form-item :label="item.label + colon">
                <slot :name="item.prop + '_content'" :data="data">
                  <sys-ellipsis :lines="item.lines" v-if="!item.html">
                    {{data[item.prop]}}
                  </sys-ellipsis>
                  <div v-else v-html="data[item.prop]"></div>
                </slot>
              </el-form-item>
            </el-col>
          </slot>
        </template>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import responsive, {responsiveArray} from '$ui/utils/responsive'

/**
 * 插槽
 * @member slots
 * prop_content: 如prop为name，则提供name插槽或name_content插槽
 *
 */
export default {
  name: 'form-detail',
  cnName: '表单-列表',
  components: {},
  /**
   * 属性参数
   * @member props
   * @property {Object|Number} [cols] responsive属性，为数值时表示列的个数
   * @property {Array} [columns] {label: '姓名', prop: 'name', span: 24}; span 为el-col的span
   * @property {Boolean} [inline] el-form的inline属性
   * @property {Boolean} [gutter] el-row的gutter属性
   * @property {Boolean} [responseAble] 是否响应式
   * @property {String} [clone = ':'] 分号
   * @property {Boolean} [border = false] 是否显示边框
   *
   */
  props: {
    cols: {
      type: [Number, Object],
      default: () => {
        return {
          xxl: 8,
          xl: 6,
          lg: 4,
          md: 3,
          sm: 2,
          xs: 1
        }
      },
      validator(val) {
        return typeof val === 'number' ? 24 % val === 0 : true
      }
    },
    columns: Array,
    data: Object,
    labelWidth: {
      type: String,
      default: '120px'
    },
    span: {
      type: Number
    },
    inline: {
      type: Boolean
    },
    // 栅格间隔
    gutter: {
      type: Number,
      default: 12
    },
    responseAble: {
      type: Boolean,
      default: true
    },
    colon: { // 分号
      type: String,
      default: ':'
    },
    border: {
      type: Boolean,
      default: false
    }
  },
  data() {
    let cols = 3
    if(typeof this.cols === 'number') {
      cols = this.cols
    }
    return {
      // 响应式场景
      screens: {},
      currData: this.data,
      currentColumn: cols
    }
  },
  methods: {
    setupResponsive() {
      if(!this.responseAble) return;
      this.token && responsive.off(this.token)

      // 参数是对象类型，即开启响应式
      if (typeof this.cols !== 'object') return

      this.token = responsive.on(screens => {
        this.screens = screens
      })
    },
    getResponsiveValue() {
      const columns = this.cols
      const defaultValue = 3
      if (!columns) return defaultValue
      // 参数是对象类型，即开启响应式
      if (typeof columns === 'object') {
        for (let i = 0; i < responsiveArray.length; i++) {
          const breakpoint = responsiveArray[i]
          if (this.screens[breakpoint]) {
            return columns[breakpoint] || defaultValue
          }
        }
      }
      // 数字类型
      return columns
    }
  },
  watch: {
    data() {
      this.currData = this.data
    },
    cols: {
      immediate: true,
      handler() {
        this.setupResponsive()
        this.currentColumn = this.getResponsiveValue()
      }
    },
    screens() {
      this.currentColumn = this.getResponsiveValue()
    }
  },
  computed: {
    rowProps() {
      return {
        gutter: this.gutter
      }
    },

    colSpan() {
      return Math.floor(24 / this.currentColumn)
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
  $bd-color: #e6e6e6;

  .form-detail {
    .row-flex {
      display: flex;
      flex-flow: row wrap;
    }

    /deep/ {
      .my-paragraph {
        margin-bottom: 0;
      }
      .el-form-item {
        margin-bottom: 5px;
      }

      .el-form-item__label {
        color: #666;
      }

      .el-form-item__content {
        color: #000;
      }
    }

    &-border {
      border-top: 1px solid $bd-color;
      border-left: 1px solid $bd-color;

      /deep/ {
        .el-form-item {
          position: relative;
          margin-bottom: 0;
          border-bottom: 1px solid $bd-color;
          border-right: 1px solid $bd-color;
        }
        .el-form-item__label {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
        .el-form-item__content {
          min-height: 33px;
          padding: 5px 10px;
          border-left: 1px solid $bd-color;
          box-sizing: content-box;
        }
        .my-typography.is-ellipsis-single-line {
          min-height: 28px;
        }
      }
    }
  }

</style>
